import React, { useState, useEffect } from 'react';
import { useModel } from 'umi';
import SearchList from '@/components/SearchList';
import { Table, Button, Tooltip, notification } from 'antd';
import API from '@/api/xjindex.js';

import {
  paginationOptions,
  transFormIndex,
  showDeleteConfirm,
} from '@/utils/util';
import {
  EyeFilled,
  EditOutlined,
  DeleteFilled,
  PlusCircleFilled,
} from '@ant-design/icons';

// 通知公告
const noticeList = ({ history }) => {
  const { initialState = {} } = useModel('@@initialState');
  const { userRoleId = '' } = initialState.info;
  const [dataSource, setDataSource] = useState([]);
  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
  });
  const [pagination, setPagination] = useState({ ...paginationOptions });
  const noticeStateOptions = [
    {
      label: '草稿',
      value: 0,
    },
    {
      label: '已发布',
      value: 1,
    },
  ];
  const searchList = [
    {
      name: 'noticeName',
      title: '公告标题',
      type: 'input',
    },
    {
      name: 'user_name',
      title: '发布人员',
      type: 'input',
    },
    {
      name: 'releaseTime',
      title: '发布时间',
      type: 'datepicker',
    },
    {
      name: 'noticeState',
      title: '公告状态',
      type: 'select',
      otherProps: {
        options: noticeStateOptions,
      },
    },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '公告标题',
      dataIndex: 'noticeName',
      align: 'center',
    },
    {
      title: '发布人员',
      dataIndex: 'userName',
      align: 'center',
    },
    {
      title: '发布时间',
      dataIndex: 'releaseTime',
      align: 'center',
    },
    {
      title: '公告状态',
      dataIndex: 'noticeState',
      align: 'center',
      render: (text) =>
        noticeStateOptions.find((el) => {
          return el.value == text;
        }).label,
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (text, r) => (
        <div>
          <Tooltip title="查看">
            <Button
              type="link"
              icon={<EyeFilled />}
              className="table-icon"
              onClick={dispatchFn.bind(null, {
                type: 0,
                id: r.id,
              })}
            ></Button>
          </Tooltip>
          {r.noticeState == 0 ? (
            <>
              <Tooltip title="编辑">
                <Button
                  type="link"
                  icon={<EditOutlined />}
                  className="table-icon"
                  onClick={dispatchFn.bind(null, {
                    type: 1,
                    id: r.id,
                  })}
                ></Button>
              </Tooltip>
              <Tooltip title="删除">
                <Button
                  type="link"
                  icon={<DeleteFilled />}
                  className="table-icon"
                  onClick={() => showDeleteConfirm(delFn.bind(null, r.id))}
                ></Button>
              </Tooltip>
            </>
          ) : (
            ''
          )}
        </div>
      ),
    },
  ];

  const createLink = () => {
    history.push('/networkInfor/notice/create');
  };

  // 查看 or 编辑
  const dispatchFn = (action) => {
    const types = ['detail', 'edit'];
    history.push({
      pathname: `/networkInfor/notice/${types[action.type]}`,
      query: {
        id: action.id,
      },
    });
  };

  // 删除
  const delFn = (id) => {
    API.delAffiche({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList();
      }
    });
  };

  const searchFn = (data) => {
    setParams({
      ...data,
      pageNo: 1,
      pageSize: 10,
    });
  };

  const initList = (data = {}) => {
    const defaultData = {
      noticeName: '',
      user_name: '',
      releaseTime: '',
      noticeState: '-1',
    };
    for (const key in defaultData) {
      if (data[key] === undefined) {
        data[key] = defaultData[key];
      }
    }
    const values = { ...params, ...data };
    if (values?.releaseTime) {
      values.releaseTime = values.releaseTime.format('YYYY-MM-DD');
    }
    API.getAfficheList(values).then((res) => {
      if (res?.t) {
        setDataSource(res.t.queryList);
        setPagination({
          ...pagination,
          total: res.t.totalSize,
          current: res.t.currentPage,
          pageSize: res.t.pageSize,
        });
      }
    });
  };

  const changeTable = (pagination) => {
    setParams({
      ...params,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    });
  };

  useEffect(() => {
    initList(params);
  }, [params]);

  return (
    <>
      <SearchList searchList={searchList} initList={searchFn}></SearchList>
      <div className="main-x bgf">
        <div className="tools-x">
          <Button
            type="link"
            className="btn-icon"
            icon={<PlusCircleFilled />}
            onClick={createLink}
          >
            发布公告
          </Button>
        </div>
        <Table
          columns={columns}
          rowKey="id"
          dataSource={dataSource}
          pagination={pagination}
          className="custom-table"
          onChange={changeTable}
        ></Table>
      </div>
    </>
  );
};

export default noticeList;
